<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>系统 - 登录</title>
    <link rel="shortcut icon" th:href="@{'/favicon.ico'}">
    <link th:href="@{'/css/bootstrap.min.css?v=3.3.6'}" rel="stylesheet"/>
    <link th:href="@{'/css/font-awesome.min.css?v=4.4.0'}" rel="stylesheet">
    <link th:href="@{'/css/animate.css'}" rel="stylesheet"/>
    <link th:href="@{'/css/style.css'}" rel="stylesheet"/>
    <link th:href="@{'/css/login.css'}" rel="stylesheet"/>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        contextPath = /*[[@{/}]]*/ '';
        var basePath = contextPath;

        if (window.top !== window.self) {
            window.top.location = window.location;
        }
        /*]]>*/
    </script>

</head>

<body class="signin">
<div class="signinpanel">
    <div class="row">
        <div class="col-sm-7">
            <div class="signin-info">
                <div class="logopanel m-b">
                    <h1>系统</h1>
                </div>
                <div class="m-b"></div>
                <h4>欢迎使用
                    <strong>系统</strong>
                </h4>
                <ul class="m-b">

                </ul>
                <strong></strong>
            </div>
        </div>
        <div class="col-sm-5">
            <form id="fm" data-validator-option="{timely:8,theme:'yellow_top'}">
                <h4 class="no-margins">登录：</h4>
                <p class="m-t-md">登录到系统</p>
                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                <input type="text" class="form-control uname" name="username" placeholder="输入用户名（至少 4 个字符）"
                       data-rule="required;length(3~)"/>
                <input type="password" class="form-control pword m-b" name="password" placeholder="输入密码（6~16 个字符）"
                       data-rule="required;length(6~16)"
                />
                <div class="form-group" style="margin-top:0; padding-top:0">
                    <div class="col-sm-8" style="padding-left: 0; padding-right: 0;">
                        <input class="form-control pword m-b" type="text" name="captcha" placeholder="验证码">
                    </div>
                    <div class="col-sm-4">
                        <img th:src="@{/kaptcha.jpg}" data-src="/kaptcha.jpg?" id="kaptcha" style="height:34px; margin-top:
                            15px; margin-left:-10px;"/>
                    </div>
                </div>
                <div class="form-group" style="margin-top:80px;">
                    <input id="remember-me" type="checkbox" name="rememberMe" value="1" checked/>
                    <label for="remember-me">
                        记住密码
                    </label>
                </div>
                <button class="btn btn-success btn-block">登录</button>
                <p class="text-muted text-center" style="color: #ff0000; display:none;" id="msg"></p>
            </form>
        </div>
    </div>
    <div class="signup-footer">
        <div class="pull-left">
            &copy; 1999-2018 All Rights Reserved.
            <a href="http://www.xy-worldway.com" target="_blank">XX信息技术股份有限公司</a>
        </div>
    </div>
</div>
<script th:src="@{'/js/jquery.min.js?v=2.1.4'}"></script>
<script th:src="@{'/js/bootstrap.min.js?v=3.3.6'}"></script>
<script th:src="@{'/plugins/nice-validator/jquery.validator.min.js?local=zh-CN'}"></script>
<script type="text/javascript" th:inline="javascript">
    //验证码
    $("#kaptcha").click(function () {
        var $this = $(this);
        var url = basePath + $this.data("src") + Math.floor(Math.random() * 100);
        $this.attr("src", url);
    });

    $(function () {
        $("#fm").validator({
            valid: function (form) {
                var me = this;
                // 提交表单之前，hold住表单，防止重复提交
                me.holdSubmit();
                $.ajax({
                    url: basePath + "login",
                    data: $(form).serializeArray(),
                    type: "POST",
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            window.location.href = basePath + "index";
                        } else {
                            // 刷新验证码
                            $("#kaptcha")[0].click();
                            $("#msg").html(data.msg);
                            $("#msg").css('display', 'block');
                            //失败，提交表单成功后，释放hold，如果不释放hold，就变成了只能提交一次的表单
                            me.holdSubmit(false);
                        }
                    }
                });
            }
        });
    });
</script>
</body>

</html>